<script lang='ts'>
import { computed, defineComponent, PropType } from "vue";
import { Clock } from "@element-plus/icons";
import moment from "moment";

interface dataType {
  imageUrl: string; //图片地址
  name: string; //标题名称
  servicetype: number; //服务类型
  year: string; //年份
  type: string; //空间参考
  xzqmc: string; //行政策划名称
  desc: string; //描述
  date: string; //时间
  CreateTime: string; //创建时间
  url: string; //服务地址
}

const props = {
  data: {
    type: Object as PropType<dataType>,
    default: {
      imageUrl: "",
      name: "",
      servicetype: 0,
      year: "", //年份
      type: "", //空间参考
      xzqmc: "", //行政策划名称
      desc: "", //描述
      date: "", //时间
      CreateTime: "", //创建时间
      url: "", //服务地址
    },
  },
};

export default defineComponent({
  name: "ServeCard",
  components: { Clock },
  props,
  emits: ["applyEvent", "previewEvent"],
  setup(props, { emit }) {
    const apply = () => {
      emit("applyEvent");
    };
    const preview = () => {
      emit("previewEvent");
    };

    //类型转换
    const servicetype_filter = computed(() => {
      const serveTypeList = [
        { value: 0, label: "全部" },
        { value: 1, label: "矢量瓦片" },
        { value: 2, label: "WMTS" },
        { value: 3, label: "WMS" },
        { value: 4, label: "MapServer" },
        { value: 5, label: "WFS" },
        { value: 6, label: "WCS" },
        { value: 7, label: "XYZ" },
        { value: 8, label: "WCS" },
        { value: 9, label: "POI" },
        { value: 10, label: "地理编码服务" },
        { value: 11, label: "统计报表" },
        { value: 12, label: "压占分析" },
      ];

      let x = serveTypeList.filter(
        (item: any) => item.value == props.data.servicetype
      );
      //console.log(props.data.servicetype, x);
      return x.length > 0 ? x[0].label : "";
    });

    //时间格式化
    const date_filter = computed(() => {
      let time = props.data.CreateTime;
      let timeReg = time.replace(/\/Date\((\d+)\)\//gi, "$1");
      let result = moment(parseInt(timeReg)).format("YYYY/MM/DD hh:mm:ss");
      return result;
    });

    return { apply, preview, servicetype_filter, date_filter };
  },
});
</script>

<template>
  <div class="server-card-wrap">
    <el-row>
      <el-col :span="5" class="server-card-photo"
        ><img :src="data.imageUrl"
      /></el-col>
      <el-col :span="18" class="server-card-content">
        <!-- 第一行 -->
        <div class="content-top">
          <span class="content-title">{{ data.name }}</span>
          <div class="content-type">{{ servicetype_filter }}</div>
        </div>
        <!-- 第二行 -->
        <el-row class="content-center">
          <el-col :span="6">服务类型:{{ servicetype_filter }}</el-col>
          <el-col :span="6">地域范围:{{ data.xzqmc }}</el-col>
          <el-col :span="6">数据年份:{{ data.year }}</el-col>
          <el-col :span="6">空间参考:{{ data.type }}</el-col>
          <el-col :span="24">服务描述:{{ data.desc }}</el-col>
        </el-row>
        <!-- 第三行 -->
        <div class="content-bottom">
          <div class="content-bottom-time">
            <el-icon color="blue">
              <clock />
            </el-icon>
            <span>{{ date_filter }}</span>
          </div>
          <div>
            <el-button type="primary" plain size="mini" round @click="apply"
              >申请</el-button
            >
            <el-button type="primary" plain size="mini" round @click="preview"
              >预览</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang='less' scoped>
.server-card-wrap {
  //   width: 100%;
  min-width: 400px;
  min-height: 80px;
  background-color: #f1f7ff;
  margin: 8px 0;

  .server-card-photo {
    display: flex;
    align-items: center;
    img {
      width: 100%;
      max-width: 210px;
      height: 150px;
    }
  }

  .server-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin-left: 10px;
    .content-top {
      padding-top: 10px;
      .content-title {
        color: blue;
      }
      .content-type {
        display: inline-block;
        background: rgb(28, 75, 135);
        border-radius: 24px;
        color: white;
        padding: 1px 5px;
        margin-left: 5px;
        font-size: 0.8em;
      }
    }

    .content-center {
      font-size: 0.8em;
      min-height: 60px;
    }
    .content-bottom {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .content-bottom-time {
        display: flex;
        align-items: center;
      }

      span {
        padding-left: 4px;
        font-size: 0.8em;
      }
    }
  }
}
</style>